<!DOCTYPE html>
<html lang="en">
<head>
    <% include ../components/head %>
</head>
<body>
<script src="../../public/js/products.js" type="javascript"></script>
<script>
    let productData = [{
            "tradeNo": "",
            "merchantCode": "CashBean",
            "orderStatus": 0,
            "categoryCode": "CashBean",
            "categoryName": "CashBean",
            "categoryLogo": "https://dc-oss2.oss-ap-south-1.aliyuncs.com/organizationList/cashbean.webp",
            "categoryDesc": "Efficient Application Review",
            "categoryRange": "₹1500-60000",
            "categoryApplicationRatio": 58,
            "buttonName": "Get Now",
            "buttonJumpUrl": "URL/productdetail?categoryCode=CashBean&merchantCode=CashBean",
            "categoryType": 1,
            "categoryTypeDesc": "Hot",
            "sort": 7,
            "permitApply": true
        }, {
        "tradeNo": "",
        "merchantCode": "KreditBee",
        "orderStatus": 0,
        "categoryCode": "KreditBee",
        "categoryName": "KreditBee",
        "categoryLogo": "https://dc-oss2.oss-ap-south-1.aliyuncs.com/organizationList/kreditBee.webp",
        "categoryDesc": "approved within 15 minutes from registration to direct bank transfer.",
        "categoryRange": "₹1000-200000",
        "categoryApplicationRatio": 62,
        "buttonName": "google play",
        "buttonJumpUrl": "URL/jumpgoogle?url=com.kreditbee.android",
        "categoryType": 3,
        "categoryTypeDesc": "Ongoing",
        "sort": 8,
        "permitApply": true
    }, {
        "tradeNo": "",
        "merchantCode": "CashBus",
        "orderStatus": 0,
        "categoryCode": "CashBus",
        "categoryName": "CashBus",
        "categoryLogo": "https://dc-oss2.oss-ap-south-1.aliyuncs.com/organizationList/cashBus.webp",
        "categoryDesc": "24*7, process of loan, so that you can avail loans even on holidays",
        "categoryRange": "₹1000-60000",
        "categoryApplicationRatio": 44,
        "buttonName": "Get Now",
        "buttonJumpUrl": "URL/productdetail?categoryCode=CashBus&merchantCode=CashBus",
        "categoryType": 3,
        "categoryTypeDesc": "Ongoing",
        "sort": 9,
        "permitApply": true
    }, {
        "tradeNo": "",
        "merchantCode": "Kissht",
        "orderStatus": 0,
        "categoryCode": "Kissht",
        "categoryName": "Kissht",
        "categoryLogo": "https://dc-oss2.oss-ap-south-1.aliyuncs.com/organizationList/kissht.webp",
        "categoryDesc": "No collateral & credit card required",
        "categoryRange": "₹10000-100000",
        "categoryApplicationRatio": 53,
        "buttonName": "Get Now",
        "buttonJumpUrl": "URL/productdetail?categoryCode=Kissht&merchantCode=Kissht",
        "categoryType": 3,
        "categoryTypeDesc": "Ongoing",
        "sort": 10,
        "permitApply": true
    }, {
        "tradeNo": "",
        "merchantCode": "Kreditzy",
        "orderStatus": 0,
        "categoryCode": "Kreditzy",
        "categoryName": "Kreditzy",
        "categoryLogo": "https://dc-oss2.oss-ap-south-1.aliyuncs.com/organizationList/kreditzy.webp",
        "categoryDesc": "From 0% to 29.95% per annum",
        "categoryRange": "₹1000-200000",
        "categoryApplicationRatio": 63,
        "buttonName": "Get Now",
        "buttonJumpUrl": "URL/productdetail?categoryCode=Kreditzy&merchantCode=Kreditzy",
        "categoryType": 3,
        "categoryTypeDesc": "Ongoing",
        "sort": 11,
        "permitApply": true
    }, {
        "tradeNo": "",
        "merchantCode": "KreditOne",
        "orderStatus": 0,
        "categoryCode": "KreditOne",
        "categoryName": "KreditOne",
        "categoryLogo": "https://dc-oss2.oss-ap-south-1.aliyuncs.com/organizationList/kreditOne.webp",
        "categoryDesc": "Apply anytime from anywhere.",
        "categoryRange": "₹3000-200000",
        "categoryApplicationRatio": 71,
        "buttonName": "google play",
        "buttonJumpUrl": "URL/jumpgoogle?url=com.szxfd.kredit.uat",
        "categoryType": 3,
        "categoryTypeDesc": "Ongoing",
        "sort": 12,
        "permitApply": true
    }, {
        "tradeNo": "",
        "merchantCode": "MyKredit",
        "orderStatus": 0,
        "categoryCode": "MyKredit",
        "categoryName": "My Kredit",
        "categoryLogo": "https://dc-oss2.oss-ap-south-1.aliyuncs.com/organizationList/myKredit.webp",
        "categoryDesc": "Convenience of automatic repayment along with other payment modes.",
        "categoryRange": "₹2000-50000",
        "categoryApplicationRatio": 81,
        "buttonName": "Get Now",
        "buttonJumpUrl": "URL/productdetail?categoryCode=MyKredit&merchantCode=MyKredit",
        "categoryType": 3,
        "categoryTypeDesc": "Ongoing",
        "sort": 13,
        "permitApply": true
    }
    ];
    console.log('openned');
    const testURL = 'https://dc-api.rupee-mama.in'
    fetch(testURL + '/website/product/list', {method: 'POST'}).then(res => res.json())
        .then(data => {
            // console.log(data.data.categorys)
            // productData = data.data.categorys;
            makeList(productData);
        }).catch(() => {
        makeList(productData);
    });

    function getApp(i) {
        const img = document.querySelector('.qr-img img')
        const playLink = document.querySelector('.qr-img a')
        playLink.removeAttribute('src')
        img.removeAttribute('src')
        playLink.setAttribute('href', productData[i].playStoreUrl);
        img.setAttribute('src', productData[i].imgeQRCodeUrl);
    }

    function filterAmount(lowToHigh) {
        const prodList = [...productData].sort((a, b) => {
            const [lowA, highA] = a.categoryRange.split('-');
            const [lowB, highB] = a.categoryRange.split('-');
            if (lowToHigh) {
                return parseInt(lowA.substring(1)) - parseInt(lowB.substring(1))
            }
            return parseInt(highB) - parseInt(highA)
        })
        console.log(prodList.map(a => a.categoryRange));
        makeList(prodList);
    }

    function filterPopularity() {
        const prodList = [...productData].sort((a, b) => {
            return parseInt(a.categoryApplicationRatio) - parseInt(b.categoryApplicationRatio)
        })
        console.log(prodList.map(a => a.categoryApplicationRatio));
        makeList(prodList);
    }

    function makeList(prodData) {
        const container = document.querySelector('.product .row');
        removeChildElements(container)
        prodData.forEach((prod, i) => {
            container.insertAdjacentHTML('beforeEnd', `
      <div class="col-md-6" onClick='getApp(${i})' data-toggle="modal" data-target="#exampleModal">
        <div class="product-item row">
          <div class="col-2 product-logo">
            <img class="avatar img-fluid" src="${prod.categoryLogo}" alt="">
          </div>
          <div class="col-6 product-details">
            <h4 class="product-title">${prod.categoryName}</h4>
            <p class="product-desc">${prod.categoryDesc}</p>
            <div class="product-application-ratio">
              <div class="progress">
                <div class="progress-bar progress-bar-striped primary-color-bg" role="progressbar " style="width: ${prod.categoryApplicationRatio}%" aria-valuenow="${prod.categoryApplicationRatio}" aria-valuemin="0" aria-valuemax="100"></div>
                <p style="position:inline;">${prod.categoryApplicationRatio}%<p></div>
              </div>
          </div>
          <div class="col-4">
            <p class="product-pricing d-flex justify-content-end"><strong>${prod.categoryRange}</strong></p>
            <p class="product-button d-flex justify-content-end"><strong>${prod.buttonName} &gt;&gt; </strong></p>
          </div>
        </div>
      </div>
      `);
        });
    }

    function removeChildElements(element) {
        while (element.firstChild) {
            element.removeChild(element.firstChild);
        }
    }
</script>
<% include ../components/header %>
<div class="container product-container pt-5">
    <div class="title">
        <h2>Products</h2>
    </div>
    <div class="card">
        <div class="row">
            <!--        <div class="dropdown col-md-2">-->
            <!--          <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
            <!--            Amount-->
            <!--          </button>-->
            <!--          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">-->
            <!--            <a class="dropdown-item" onclick="filterAmount(true)">Low To High</a>-->
            <!--            <a class="dropdown-item" onclick="filterAmount(false)">High to Low</a>-->
            <!--          </div>-->
            <!--        </div>-->
            <!--        <div class="col-md-2 col-sm-6">-->
            <!--          <button type="button" class="btn" onclick="filterPopularity()">Popularity</button>-->
            <!--        </div>-->
            <!--      </div>-->
            <div class="product">
                <div class="row">
                    <div class="spinner-border mx-auto" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header primary-color-bg">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body ">
                    <h5>Open the qr code of app scan and apply for a loan on the mobile phone</h5>
                </div>
                <div class="modal-body qr-img mx-auto">
                    <img class="img-fluid" src="" alt="">
                    <a href="">
                        <img class="mx-auto" src="img/google-play@1x.png" alt="" style="display: block;">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <% include ../components/footer %>
</body>
</html>
